<!-- setup语法糖是3.2.x之后提供的，现在是vue3的主流写法 -->
<script setup>
// vue3直接导入就可以使用
// import HelloWorld from './components/HelloWorld.vue'

// 引入子组件，即可使用（路径要写全）
// import Composition from './components/01-Composition.vue'
// import Reactive from './components/02-Reactive.vue'
// import SetupSugar from './components/03-SetupSugar.vue'
// import Computed from './components/04-Computed.vue'
// import Watch from './components/05-Watch.vue'
// import Life from './components/06-Life.vue'
// import RefDom from './components/07-RefDom.vue'
// import RefChild from './components/08-RefChild.vue'
// import Parent from './components/09-Parent.vue'
// import GrandPa from './components/11-GrandPa.vue'
import ToRefs from './components/14-toRefs.vue'
// import { ref } from 'vue'
// const isShow = ref(true)
</script>

<template>
  <!-- template可以支持多个根级节点 -->
  <!-- <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" /> -->
  <!-- <Composition /> -->
  <!-- <Reactive /> -->
  <!-- <SetupSugar /> -->
  <!-- <Computed /> -->
  <!-- <Watch /> -->
  <!-- <Life v-if="isShow" /> -->
  <!-- <RefDom /> -->
  <!-- <RefChild /> -->
  <!-- <Parent /> -->
  <!-- <GrandPa /> -->
  <ToRefs />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
